<template>
  <div class="photos">
    <div class="slider">
      <!-- 轮播图容器 -->
      <div class="slider-wrapper">
        <img 
          :src="currentImage.url" 
          :alt="currentImage.title"
          class="slider-image"
          @mouseenter="stopSlider"
          @mouseleave="startSlider"
        />
      </div>

      <!-- 底部导航栏 -->
      <div class="slider-footer">
        <p>{{ currentImage.title }}</p>
        
        <!-- 指示点 -->
        <ul class="slider-indicator">
          <li 
            v-for="(item, index) in images" 
            :key="index" 
            :class="['indicator-dot', { active: index === currentIndex }]"
            @click="handleIndicatorClick(index)"
          ></li>
        </ul>

        <!-- 控制按钮 -->
        <div class="toggle">
          <el-button class="nav-button prev" @click="prevImage" type="primary">&lt;</el-button>
          <el-button class="nav-button next" @click="nextImage" type="primary">&gt;</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'

// 图片数据
const images = reactive([
  { url: new URL('@/assets/1.jpg', import.meta.url).href, title: 'VR安全培训场景' },
  { url: new URL('@/assets/2.png', import.meta.url).href, title: '虚拟现实操作' },
  { url: new URL('@/assets/3.jpg', import.meta.url).href, title: '消防演练模拟' },
  { url: new URL('@/assets/4.jpg', import.meta.url).href, title: '设备操作指导' },
  { url: new URL('@/assets/5.jpg', import.meta.url).href, title: '应急避险教学' }
])

// 当前索引
const currentIndex = ref(0)
const intervalId = ref(null)

// 当前图片计算属性
const currentImage = computed(() => images[currentIndex.value])

// 启动轮播
const startSlider = () => {
  intervalId.value = setInterval(() => {
    currentIndex.value = (currentIndex.value + 1) % images.length
  }, 3000)
}

// 停止轮播
const stopSlider = () => {
  clearInterval(intervalId.value)
}

// 上一张
const prevImage = () => {
  stopSlider()
  currentIndex.value = (currentIndex.value - 1 + images.length) % images.length
  startSlider()
}

// 下一张
const nextImage = () => {
  stopSlider()
  currentIndex.value = (currentIndex.value + 1) % images.length
  startSlider()
}

// 点击指示点
const handleIndicatorClick = (index) => {
  stopSlider()
  currentIndex.value = index
  startSlider()
}

// 生命周期：挂载时启动轮播
onMounted(() => {
  startSlider()
})

// 生命周期：卸载时停止轮播
onUnmounted(() => {
  stopSlider()
})
</script>
<style scoped>
.photos {
  position: relative;
  top: 12%;
  left: 1%;
  width: 60%;
  height: 80%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slider {
  width: 100%;
  height: 100%;
  position: relative;
}

.slider-wrapper {
  width: 100%;
  height: 85%;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.slider-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.5s ease-in-out;
  opacity: 1;
}

/* 指示点样式 */
.slider-indicator {
  list-style: none;
  display: flex;
  justify-content: center;
  margin: 10px 0 0;
  padding: 0;
}

.indicator-dot {
  width: 10px;
  height: 10px;
  margin: 0 6px;
  background: #fff;
  border-radius: 50%;
  opacity: 0.4;
  cursor: pointer;
  transition: all 0.3s ease;
}

.indicator-dot.active {
  width: 12px;
  height: 12px;
  opacity: 1;
  background: #409EFF;
}

/* 控制按钮样式 */
.toggle {
  position: absolute;
  right: 20px;
  bottom: 60px;
  display: flex;
  z-index: 10;
  top: 90%;
}
</style>